<template>
  <div class="comment-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>评论管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <el-table
      :data="articles"
      v-loading="loading"
      stripe
      style="width: 100%">
      <el-table-column
        prop="title"
        label="标题">
      </el-table-column>
      <el-table-column
        prop="total_comment_count"
        label="总评论数">
      </el-table-column>
      <el-table-column
        prop="fans_comment_count"
        label="粉丝评论数">
      </el-table-column>
      <el-table-column
        prop="comment_status"
        label="评论状态">
        <template slot-scope="scope">
        <el-tag
          :type="scope.row.comment_status ? 'success' : 'danger'"
          disable-transitions>{{scope.row.comment_status ? '正常' : '关闭'}}</el-tag>
      </template>
      </el-table-column>
      <el-table-column label="开启评论">
        <template slot-scope="scope">
          <el-switch
          v-model="scope.row.comment_status"
          active-color="#13ce66"
          :disabled="scope.row.statusDisabled"
          @change="onStatusChange(scope.row)"
          inactive-color="#ff4949">
        </el-switch>
      </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        background
        :disabled="loading"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    </el-card>

  </div>
</template>

<script>
import { getArticles, statusChange } from '@/api/article'
export default {
  name: 'CommentIndex',
  data () {
    return {
      articles: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(val)
      this.pageSize = val
      this.loadAricles()
    },
    handleCurrentChange (val) {
      // this.loading = true
      this.loadAricles(val)
    },
    loadAricles (page = 1) {
      this.currentPage = page
      this.loading = true
      getArticles({
        response_type: 'comment',
        page,
        per_page: this.pageSize
      }).then(res => {
        this.loading = false
        const { results } = res.data.data
        results.forEach(article => {
          article.statusDisabled = false
        })
        this.articles = results
        this.totalCount = res.data.data.total_count
        this.total = res.data.data.total_count
      }).catch(() => {
        this.loading = false
      })
    },
    onStatusChange (article) {
      article.statusDisabled = true
      console.log(article)
      statusChange(article.id.toString(), article.comment_status).then(res => {
        article.statusDisabled = false
      }).catch(() => {
        article.statusDisabled = false
      })
    }
  },
  components: {},
  props: {},
  computed: {},
  watch: {},
  created () {
    this.loadAricles()
  },
  mounted () {
  }
}
</script>

<style scoped lang='less'>
.comment-container{
  .page{
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
